<template>
	<div id="chat">
		<div class="message" id="chat_main">
			<ul>
				<template v-for="chatRespBody in chatRespBodys">
					<li>
						<p class="time">
							<span>{{ chatRespBody.date }}</span>
						</p>{{ chatRespBody.getFromclient().getUser().getNick() }}
	
						<div class="main" :class="{ 'self': (chatRespBody.getFromclient().getUser().id == currUserid) }">
							<img class="avatar" width="30" height="30" v-bind:src="chatRespBody.getFromclient().getUser().getAvatar()">
							<div class="text" v-html="chatRespBody.getText()">
							</div>
						</div>
					</li>
				</template>
			</ul>
		</div>
	
		<div class="text">
			<textarea id="text" placeholder="按 Ctrl + Enter 发送" v-model="content" @keyup="onKeyup"></textarea>
		</div>
	</div>
</template>

<script>
export default {
	name: 'chat',
	data() {
		return {
			chatRespBodys: [

			], currUser: null
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.message {
	padding: 10px 15px;
	overflow-y: scroll;

	li {
		margin-bottom: 15px;
	}
	.time {
		margin: 7px 0;
		text-align: center;

		>span {
			display: inline-block;
			padding: 0 18px;
			font-size: 12px;
			color: #fff;
			border-radius: 2px;
			background-color: #dcdcdc;
		}
	}
	.avatar {
		float: left;
		margin: 0 10px 0 0;
		border-radius: 3px;
	}
	.text {
		display: inline-block;
		position: relative;
		padding: 0 10px;
		max-width: ~'calc(100% - 40px)';
		min-height: 30px;
		line-height: 2.5;
		font-size: 12px;
		text-align: left;
		word-break: break-all;
		background-color: #fafafa;
		border-radius: 4px;

		&:before {
			content: " ";
			position: absolute;
			top: 9px;
			right: 100%;
			border: 6px solid transparent;
			border-right-color: #fafafa;
		}
	}

	.self {
		text-align: right;

		.avatar {
			float: right;
			margin: 0 0 0 10px;
		}
		.text {
			background-color: #b2e281;

			&:before {
				right: inherit;
				left: 100%;
				border-right-color: transparent;
				border-left-color: #b2e281;
			}
		}
	}
}





.text {
	height: 160px;
	border-top: solid 1px #ebeef5;

	textarea {
		padding: 10px;
		height: 100%;
		width: 100%;
		border: none;
		outline: none;
		font-family: "Micrsofot Yahei";
		resize: none;
	}
}
</style>